<template>
	<view class="u-p-t-2">
		<image src="~@/static/distribution/bg.png" class="u-abso bg" mode=""></image>
		<!-- <view class="info u-p-40"> -->
		<view class="info "style="padding: 40rpx 0rpx 40rpx 40rpx;">
			<view class="u-flex u-m-b-66">
				<u-avatar :src="user.avatar_url" size="114"></u-avatar>
				<view class="u-flex-col u-m-l-18  u-font-40 col000">
					<text>{{user.nick_name}}</text>
					<text class="u-font-24 u-m-t-10">邀请码：{{ user.user_code }}</text>

				</view>
			</view>
			<view class="u-flex u-row-between u-font-28 colA0" style="overflow: hidden;">
				<view class="u-flex-col u-col-center">
					<text class="u-m-b-16 u-font-40 col3A">{{user.balance}}</text>
					<text>佣金(提现)</text>
				</view>
				<view style="width: 3.5rpx;height: 80rpx;background-color: #82848A;">
					
				</view>
				<view class="u-flex-col u-col-center">
					<text class="u-m-b-16 u-font-40 col3A">{{user.tjr_num}}</text>
					<text>团队人数</text>
				</view>
				<view class="flex-end">
					<u-button style="border-radius: 30rpx 0 0 30rpx !important;" :custom-style="customStyle" @click="withdrawDepositShow=true">
						<view class="u-flex toCrash">
							<text>去提现</text>
							<!-- <u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon> -->
						</view>
					</u-button>
				</view>
			</view>
		</view>
		<view class="cells">
			<u-cell-group>
				<u-cell-item title="佣金明细" index="0" @click="toRecord">
					<image slot="icon" src="~@/static/distribution/yongjin.png" mode=""  class="icon"></image>
				</u-cell-item>
<!-- 				<u-cell-item title="红积分" index="0" @click="toRedRecord">
					<image slot="icon" src="~@/static/distribution/red.png" mode=""  class="icon"></image>
				</u-cell-item> -->
				<u-cell-item title="收入历史" index="1" @click="toRecord">
					<image slot="icon" src="~@/static/distribution/lishi.png" mode=""   class="icon"></image>
				</u-cell-item>
				<u-cell-item title="我的团队" @click="toTeam">
					<image slot="icon" src="~@/static/distribution/tuandui.png" mode="" class="icon"></image>
				</u-cell-item>
			</u-cell-group>
		</view>
		
		<u-popup v-model="withdrawDepositShow" mode="bottom" border-radius="14" height="700rpx" closeable >
			<view class="box">
				<view class="title">
					提现金额
				</view>
				<view class="content" >
					<text>请输入金额</text>
					<view class="input">
						￥ <input style="margin-left: 20rpx;font-weight: 200;" type="number"   v-model="money" @blur="verifyMoney" :border="border" placeholder="请输入金额" />
					</view>
					<view class="tips">当前可提现余额{{user.balance}},<text @click="money=user.balance">全部提现</text></view>
				</view>
				<view class="btn" @click="submitMoney">
					立即提现
				</view>
			</view>
			
				
		</u-popup>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	export default {
		onLoad() {
			this.getUser()
		},
		data() {
			return {
				src: '',
				user: {},
				customStyle: {
					background: '#302E2E',
					border : '0',
					height: '60rpx',
					color: '#FFFFFF',
					borderRadius: '15rpx 0 0 15rpx',
					zIndex: 10,
					transform: 'translateX(5px)',
				},
				withdrawDepositShow: false,
				money:'',
			};
		},
		methods: {
			verifyVal(val){
			},
			submitMoney(){
				if(!this.money){
					return 
				}
				this.myhttp({
					url:'?s=/api/user/addWithdrawal',
					data:{
						price : this.money
					}
				}).then(res=>{
					console.log(res);
					if(res.data.message=="操作成功"){
						UserApi.info().then(res1 => {
							uni.setStorageSync('userInfo', res1.data.data.userInfo)
							this.user = uni.getStorageSync('userInfo')
							this.money = ''
							uni.showToast({
								icon:'success',
								duration: 2000,
								title:'提现成功'
							})
							setTimeout(()=>{
								this.withdrawDepositShow = false
							},1500)
						})
					}else{
						uni.showToast({
							icon:'error',
							duration: 2000,
							title:'提现失败'
						})
					}
					
				})
			},
			verifyMoney(){
				console.log(this.money);
			},
			toRecord(index) {
				
				this.$navTo('pages/record/index',{type: index })
			},
			toRedRecord(index) {
				this.$navTo('pages/record/redRecord')
			},
			toTeam() {
				this.$navTo('pages/team/index')
			},
			getUser() {
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || null
				if(userInfo) {
					this.user = uni.getStorageSync('userInfo')
				}else {
					UserApi.info().then(res => {
						that.user = res1.data.data.userInfo
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 600rpx;
		.title{
			font-size: 32rpx;
			margin: 40rpx 0;
			font-weight: 600;
			color: #302e2e;
		}
		.content{
			flex: 1;
			width: 95%;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 15rpx #0005;
			padding: 20rpx;
			border-radius: 15rpx;
			text{
				
			}
			.input{
				display: flex;
				align-items: center;
				margin: 50rpx 0;
				font-size: 32rpx;
				font-weight: 600;
			}
			.tips{
				text{
					color: #2878ff;
				}
			}
		}
		
		.btn{
			background-color: #302e2e;
			color: #fff;
			font-size: 32rpx;
			border-radius: 35rpx;
			width: 200rpx;
			height: 70rpx;
			display: grid;
			place-items: center;
		}
		
		
	}
	
	.col000 {
		color: #000000;
	}

	.col3A {
		color: #3A3A3A;
	}

	.colA0 {
		color: #A0A0A0;
	}

	.bg {
		width: 100%;
		height: 385upx;
		z-index: -999;
	}
	.flex-end {
		align-self: flex-end;
	}
	.info {
		margin: 130upx auto 0;
		width: 680upx;
		background: #FFFFFF;
		box-shadow: 0upx 20upx 46upx 5upx rgba(35, 35, 35, 0.06);
		border-radius: 20upx;
	}

	.cells {
		width: 680upx;
		margin: 23upx auto;
		border-radius: 20rpx;
		overflow: hidden;

		.icon {
			width: 46upx;
			height: 46upx;
			margin-right: 18upx;
		}
	}
</style>
